<script lang="ts" setup>
// import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from "vue";

const s3 = [
  "产品工号",
  "产品名称",
  "物料名称",
  "机号",
  "图号",
  "件号",
  "数量",
  "备注"
]
const tableData2 = []
for (let index = 0; index < 6; index++) {
  tableData2.push({
    name0: "10020017" + (index + 4),
    name1: "印度",
    name2: "前大梁",
    name3: "5#",
    name4: "GYDE-2-3",
    name5: "1/2",
    name6: "23",
    name7: ""
  })
}
const radio1 = ref("否");
const tableData = [
  {
    date: "生产部",
    name: "张三",
    address: "紧急单，请尽快",
  },
  {
    date: "物资部",
    name: "李四",
    address: "好的，收到",
  },
];
const ruleForm = reactive({
  name: "",
  sum: 20,
});
const rules = reactive({
  req: [{ required: true, message: "请输入", trigger: "blur" }],
});
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="search-wrapper">
      <div style="max-width: 920px" class="m-auto">
        <!-- <div class="py-3 text-right">
        </div> -->
        <div class="py-3 flex">
          <div class="text-2xl flex-1">
            审批
            <el-button type="primary">打印</el-button>
          </div>
          <div class="pr-5">
            <span class="urgent-stamp">加急订单</span>
          </div>
          <div class="">
            <img class="w-20" src="/code.png" alt="" />
          </div>
        </div>
        <el-steps :active="1" finish-status="success" class="pb-6">
          <el-step title="下单" description="2024-03-25 08:05:58" />
          <el-step title="审批中" />
          <el-step title="待打包" />
          <el-step title="打包中" />
          <el-step title="打包完成" />
        </el-steps>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        inline
        label-width="auto"
        status-icon
        style="max-width: 920px"
        class="m-auto"
      >
        <el-divider />
        <el-form-item label="申请部门" prop="name">
          <div style="width: 178px">生产部</div>
        </el-form-item>
        <el-form-item label="车间" prop="region">
          <div style="width: 178px">1车间</div>
        </el-form-item>
        <el-form-item label="班组" prop="region">
          <div style="width: 178px">2班组</div>
        </el-form-item>
        <br />
        <el-form-item label="申请人" prop="region">
          <div style="width: 178px">张三</div>
        </el-form-item>
        <el-form-item label="电话" prop="region">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <el-form-item label="收货地点" prop="req">
          <div style="width: 178px">小长兴</div>
        </el-form-item>
        <el-divider />
        <el-table :data="tableData2" class="mb-5">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="序" width="50" />
          <el-table-column
            v-for="(item, index) in s3"
            :key="index"
            :prop="'name' + index"
            :label="item"
            align="center"
          />
        </el-table>
        <div class="mb-5 flex">
          <div class="flex-1"></div>
          <el-pagination background layout="sizes, prev, pager, next" :total="30" />
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="部门" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="address" label="备注内容" />
        </el-table>
        <br />
        <el-divider />
        <!-- <el-form-item label="是否加急" prop="req">
          <div style="width: 178px; color: red">是</div>
          <el-input placeholder="请选择" />
        </el-form-item> -->
        <el-form-item >
          今日 第2单/共8单
        </el-form-item>
        <!-- <el-form-item label="是否加急" prop="req">
          <el-input placeholder="请选择" />
        </el-form-item> -->
        <!-- <br> -->
        <!-- <el-form-item label="下级审批人">
          <el-input placeholder="请选择" />
        </el-form-item> -->
        <div class="flex">
          <div>
            <el-form-item label="审批意见">
              <div style="width: 178px">
                <el-radio-group v-model="radio1">
                  <el-radio label="是">同意</el-radio>
                  <el-radio label="否">不同意</el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <br>
            <el-form-item v-show="radio1 === '否'" label="驳回原因">
              <div style="width: 178px">
                <el-input placeholder="请输入" />
              </div>
            </el-form-item>
            <br />
            <el-form-item label="扫码签字" class="items-center">
              <div>
                <img class="w-20" src="/lisi.png" alt="" />
                <img class="w-16" src="/code.png" alt="" />
              </div>
            </el-form-item>
            <br />
            <el-form-item label="备注">
              <div style="width: 178px">
                <el-input v-model="ruleForm.name" placeholder="请输入" />
              </div>
            </el-form-item>
          </div>
          <div class="h-40 pl-20">
            <el-steps direction="vertical" :active="1">
              <el-step title="发起人" description="张三 2024.10.22 12:32:24"></el-step>
              <el-step title="车间" description="李四"></el-step>
              <el-step title="主任" description="大朗"></el-step>
            </el-steps>
          </div>
        </div>
      </el-form>
      <div class="text-right m-auto" style="max-width: 920px">
        <el-button>转交</el-button>
        <el-button type="primary">确认</el-button>
      </div>
    </el-card>
  </div>
</template>
<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
.urgent-stamp {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 2px dashed #ff0000;
  color: #ff0000;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  transform: rotate(-15deg);
}

.urgent-stamp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-color: #ff0000;
  opacity: 0.2;
  border-radius: 50%;
  z-index: -1;
}

.urgent-stamp::after {
  /* content: "急件"; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  font-size: 24px;
  font-weight: bold;
  color: #ff0000;
}
</style>
